<template>
  <view class="container">
    <view class="search">
      <u-search
        placeholder="search the products"
        v-model="search_value"
        :showAction="false"
        height="64rpx"
        bgColor="#fff"
        borderColor="#CDCDCD"
        placeholderColor="#6D7484"
        :searchIconSize="40"
      ></u-search>
    </view>

    <scroll-view
      class="scroll-top-list"
      enable-flex
      scroll-x
      :scroll-into-view="`tab_${top_list.indexOf(active_top_item)}`"
      scroll-with-animation
    >
      <template v-for="(item, index) in top_list">
        <view
          :class="{ item: true, active: item === active_top_item }"
          @click="onChangeActiveStatus(item)"
          :id="`tab_${index}`"
          :key="item"
        >
          {{ item }}
        </view>
      </template>
    </scroll-view>
    <view class="cate-pro">
      <scroll-view
        class="left-aside"
        scroll-y
        scroll-with-animation
        enable-flex
        :scroll-into-view="`tab_${activeMenu}`"
      >
        <view
          :class="{
            item: true,
            active: activeMenu === index
          }"
          :id="`tab_${index}`"
          v-for="(item, index) in categoryList"
          :key="index"
          @click="onMenu(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>

      <!-- 右边 -->
      <scroll-view
        class="right-side right-list"
        scroll-y
        enable-flex
        @scrolltolower="onScrolltolower"
      >
        <view class="item" v-for="item in 10" :key="item">
          <view class="image-bar">
            <image
              src="https://img.gbuilderchina.com/erp/purchase/20240430/171471963166309f7db3e4e382242140.jpg"
              class="image"
            />
          </view>
          <view class="right-info">
            <view class="name">Product Name</view>
            <view class="content">Product Code: F71A-1454545-codoerojooll </view>
            <u-button icon="plus" shape="circle" class="custom-style" @tap="toLogin"
              >Add to the list
            </u-button>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { LOGINPATCH } from '@/constants/router/subPackages'
export default {
  data() {
    return {
      search_value: '',
      active_top_item: 'Level 1 classification',
      top_list: [
        'Level 1 classification',
        'Level 2 classification',
        'Level 3 classification',
        'Level 4 classification',
        'Level 5 classification'
      ],
      // device: uni.getSystemInfoSync(),
      // pageHeight: uni.getSystemInfoSync().safeArea.height - 32 - 24,
      activeMenu: 0,
      categoryList: [
        {
          name: 'First classification',
          id: 0
        },
        {
          name: 'Second classification',
          id: 1
        },
        {
          name: 'Third classification',
          id: 2
        },
        {
          name: 'Fourth classification',
          id: 3
        },
        {
          name: 'Fifth classification',
          id: 4
        },
        {
          name: 'Sixth classification',
          id: 5
        },
        {
          name: 'Seventh classification',
          id: 6
        },
        {
          name: 'Eighth classification',
          id: 7
        },
        {
          name: 'Ninth classification',
          id: 8
        },
        {
          name: 'Tenth classification',
          id: 9
        }
      ],
      langList: [
        {
          title: '简体中文',
          name: 'zh'
        },
        {
          title: 'English',
          name: 'en'
        }
      ],
      selectLangIndex: 0
    }
  },
  methods: {
    onChangeActiveStatus(status) {
      // 更新当前选中的状态值，并触发滚动到对应位置的逻辑。
      this.active_top_item = status
    },
    onMenu(index) {
      this.activeMenu = index
    },
    onScrolltolower() {
      // if (this.activeMenu + 1 < this.categoryList.length) {
      // 	this.activeMenu = this.activeMenu + 1
      // }
    },
    toLogin() {
      uni.navigateTo({
        url: LOGINPATCH
      })
    }
  },
  // computed: {
  //   pageHeight: function () {
  //     return this.device.safeArea.height - 32 - 24
  //   }
  // },
  onLoad() {
    // console.log(uni.getLocale())
    // this.selectLangIndex = this.langList.findIndex((item) => item.name === uni.getLocale())
    // this.selectLangIndex = this.selectLangIndex <= 0 ? 0 : this.selectLangIndex
    // uni.setLocale(this.langList[this.selectLangIndex].name)
  }
}
</script>
<style lang="scss" scoped>
.container {
  color: #444444;
}

.search {
  padding: 12rpx 32rpx;
  height: 100rpx;
  box-sizing: border-box;
}

.scroll-top-list {
  white-space: nowrap;
  height: 96rpx;
  box-sizing: border-box;
  .item {
    display: inline-block;
    padding: 26rpx 12rpx;
    font-size: 28rpx;

    &.active {
      color: $uni-color-primary;
    }

    &:first-child {
      padding-left: 36rpx;
    }

    &:last-child {
      padding-right: 36rpx;
    }
  }
}

.cate-pro {
  display: flex;
  border-top: 2rpx solid #cdcdcd;
  //高度是100vh - 96rpx - 100rpx
  height: calc(100vh - 96rpx - 100rpx);
  .left-aside {
    width: 210rpx;
    height: 100%;
    box-sizing: border-box;
    .item {
      width: 100%;
      box-sizing: border-box;
      padding: 24rpx 32rpx;
      font-size: 24rpx;
      word-wrap: break-word;
      text-align: center;

      &.active {
        color: $uni-color-primary;
        font-weight: 500;
        background: rgba($color: #3598ff, $alpha: 0.1);
      }
    }
  }

  .right-side {
    // flex: 1;
    box-sizing: border-box;
    width: 540rpx;
    padding: 22rpx;
    height: 100%;
    .item {
      display: flex;
      margin-bottom: 22rpx;

      .image-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 22rpx;

        .image {
          display: inline-block;
          height: 207rpx;
          width: 207rpx;
        }
      }

      .right-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        font-size: 24rpx;
        box-sizing: border-box;
        width: 268rpx;

        .name {
          font-size: 28rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .content {
          width: 100%;
          box-sizing: border-box;
          color: #999999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        ::v-deep .u-button {
          height: 50rpx !important;
          width: 239rpx;
          font-size: 24rpx;
          margin: 0;
        }
      }
    }
  }
}
</style>
